<template>
	<div class="radiodetail">
		<div class="topbox" :style="'background-image:url('+radiolist.picUrl+')'">
			<div class="top">
				<div>
					<i class="iconfont icon-return" @click="$router.go(-1)"></i>
					<p>电台</p>
				</div>
				<i class="iconfont icon-liebiao"></i>

			</div>
			<div class="bottom">
				<div class="titlebox">
					<div class="title">
						<h4>{{radiolist.name}}</h4>
						<p>{{radiolist.subCount}}人已经订阅</p>
					</div>
					<button>
					<i class="iconfont icon-aixin"></i>订阅</button>
				</div>
				<div class="box">
					<router-link to="/detail">详情</router-link>
					<router-link to="/show">节目</router-link>
				</div>
			</div>
		</div>

		<div>
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		name: "radiodetail",
		data() {
			return {
				radiolist: "",
				show: ""
			}
		},
		created() {
			console.log(this.$route.query.ids)
			this.$http.get("/dj/detail", {
				params: {
					rid: this.$route.query.ids
				}
			}).then(res => {

				this.radiolist = res.data.djRadio;
				this.show = res.data.djRadio.commentDatas;
				localStorage.setItem("shows", JSON.stringify(this.show)) //保存本地
				localStorage.setItem("radiolists", JSON.stringify(this.radiolist)) //保存本地
				console.log(this.show);

				if(this.radiolist.subCount > 10000) {
					this.radiolist.subCount = parseInt(this.radiolist.subCount / 10000) + "万"

				}

			})
		}

	}
</script>

<style lang="scss" scoped="scoped">
	@import "~@/assets/css/common.scss";
	.radiodetail {
		.topbox {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			background-size: 100%;
			height: vw(260);
			position: relative;
			&::after {
				content: "";
				width: 100%;
				height: vw(260);
				background: rgba(0, 0, 0, .3);
				position: absolute;
				top: 0;
				left: 0;
			}
			.top {
				width: 100%;
				background: linear-gradient(top, #999, rgba(0, 0, 0, 0));
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: vw(10) vw(16);
				z-index: 2;
				div {
					display: flex;
					align-items: center;
					i {
						font-size: vw(22);
						color: white;
					}
					p {
						color: #fff;
						font-size: vw(16);
						margin-left: vw(4);
					}
				}
				i {
					font-size: vw(24);
					color: white;
				}
			}
			.bottom{
				z-index: 3;
				.titlebox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: vw(30) vw(16);
				h4 {
					color: white;
					font-size: vw(14);
					letter-spacing: vw(1);
					font-weight: 600;
				}
				p {
					color: #ddd;
					font-size: vw(11);
					letter-spacing: vw(1);
					margin-top: vw(4);
				}
				button {
					background: red;
					padding: vw(4) vw(18);
					color: white;
					font-size: vw(12);
					border-radius: 60px;
					i {
						vertical-align: middle;
						margin-right: vw(4);
					}
				}
			}
			.box {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: vw(50);
				width: 100%;
				border-top-left-radius: vw(20);
				border-top-right-radius: vw(20);
				margin-top: vw(-20);
				background-color: white;
				z-index: 3;
				a {
					color: #333;
					display: block;
					height: vw(30);
				}
				.router-link-exact-active {
					color: red;
					border-bottom: 2px solid red;
				}
				.active-class{
					color: red;
					border-bottom: 2px solid red;
				}
			}
			}
		}
	}
</style>